交易管理模块：业务梳理与页面结构设计
概述
交易管理是管理后台的核心业务模块之一，负责处理平台的订单流转与资金管理。本节梳理交易管理的两大子模块——订单管理与我的钱包的业务需求，并完成页面基础结构搭建。
模块架构
交易管理/
├── 订单管理/
│ ├── 支付订单（Tab）
│ │ ├── 搜索表单（Form）
│ │ └── 订单列表（Table）
│ └── 退款订单（Tab）
│ ├── 搜索表单（Form）
│ └── 退款列表（Table）
└── 我的钱包/
├── 搜索表单（Form）
└── 提现记录（Table）
text
订单管理
支付订单
支付订单页面分为上下两部分：顶部搜索表单 + 底部 Tab 切换的数据表格。
表格列定义：
| 字段 | 说明 | 类型 |
|---|---|---|
| 商品名称 | 课程或商品标题 | text |
| 订单编号 | 唯一订单标识 | text |
| 单价 | 商品单价（元） | currency |
| 数量 | 购买数量 | number |
| 实付金额 | 实际支付金额（元） | currency |
| 订单状态 | 待支付/已支付/已取消 | tag |
| 支付方式 | 微信/支付宝/其他 | tag |
| 买家昵称 | 用户昵称 | text |
| 更多操作 | 详情/退款等 | actions |
退款订单
退款订单在支付订单基础上增加以下字段：
| 字段 | 说明 | 类型 |
|---|---|---|
| 申请退款金额 | 用户申请的退款金额 | currency |
| 实际退款金额 | 后台审批的实际退款金额 | currency |
| 退款原因 | 用户填写的退款说明 | text/link |
退款状态筛选：
<template>
<el-form :model="queryForm" inline>
<el-form-item label="退款状态">
<el-select v-model="queryForm.refundStatus" placeholder="请选择">
<el-option label="退款中" value="refunding" />
<el-option label="已退款" value="refunded" />
</el-select>
</el-form-item>
</el-form>
</template>
vue
动态列配置
当支付订单与退款订单的表头差异较大时，可采用动态 columns 方案：
const columnsMap: Record<string, TableColumnCtx[]> = {
payment: [
{ prop: 'productName', label: '商品名称' },
{ prop: 'orderNo', label: '订单编号' },
{ prop: 'price', label: '单价' },
{ prop: 'quantity', label: '数量' },
{ prop: 'actualAmount', label: '实付金额' },
{ prop: 'status', label: '订单状态' },
{ prop: 'payMethod', label: '支付方式' },
{ prop: 'buyer', label: '买家昵称' },
],
refund: [
{ prop: 'productName', label: '商品名称' },
{ prop: 'orderNo', label: '订单编号' },
{ prop: 'applyAmount', label: '申请退款金额' },
{ prop: 'actualRefund', label: '实际退款金额' },
{ prop: 'reason', label: '退款原因' },
{ prop: 'status', label: '退款状态' },
],
}
typescript
通过 Tab 切换时动态切换 columns 配置，实现表头的联动更新。
我的钱包
我的钱包模块管理用户的提现记录，页面结构与订单管理高度一致：
- 顶部：筛选条件（提现状态、时间范围）
- 底部：提现记录表格 + 分页
由于结构复用度高，可以抽离通用的 PageLayout 组件：
<template>
<div class="page-container">
<SearchForm :model="queryForm" :schema="searchSchema" @search="handleSearch" />
<el-tabs v-model="activeTab">
<el-tab-pane label="支付订单" name="payment">
<DataTable :columns="currentColumns" :data="tableData" />
</el-tab-pane>
</el-tabs>
<el-pagination
v-model:current-page="page"
v-model:page-size="pageSize"
:total="total"
/>
</div>
</template>
vue
路由配置
将交易管理模块加入左侧导航路由：
// router/modules/trade.ts
export default [
{
path: '/trade',
name: 'Trade',
component: () => import('@/layouts/default.vue'),
meta: { title: '交易管理', icon: 'money' },
children: [
{
path: 'order',
name: 'TradeOrder',
component: () => import('@/views/trade/order/index.vue'),
meta: { title: '订单管理' },
},
{
path: 'wallet',
name: 'TradeWallet',
component: () => import('@/views/trade/wallet/index.vue'),
meta: { title: '我的钱包' },
},
],
},
]
typescript
实践要点
- 交易管理整体结构与先前实现的页面高度相似，应尽量复用通用组件
- 退款原因字段可设计为弹窗/抽屉详情页，支持长文本展示与审批操作
- Tab 切换时，搜索表单的部分字段（如状态筛选）应联动更新
- 表格部分建议自行设计列配置，练习动态 columns 的使用
↑